Ext.define('Atman.controller.Dashboard4', {
    extend: 'Ext.app.Controller',

    config: {
        refs: {
            dashboard:{
                selector:'#dashboardview4',
                xtype:'dashboardview4',
                autoCreate:true
            },
            dashboardMain:{
                selector:'#dashboardmain4',
                xtype:'dashboardmain4',
                autoCreate:true
            },
            dashboardSub:{
                selector:'#dashboardsub4',
                xtype:'dashboardsub4',
                autoCreate:true
            }
        },
        control:{
            dashboardMain:{
                initialize:'applyDashboardMain'
            },
            dashboardSub:{
                initialize:'applyDashboardSub'
            }
        }
    },
    /* Version : 1 */
    applyDashboardMain:function(){
        var panel = this.getDashboardMain();

        Ext.define('dashboardMainModel4',{
            extend:'Ext.data.Model',
            config:{
                fields:['category','title','field1','field2','field3','field4']
            }
        });
        var store = Ext.create('Ext.data.Store', {
            model: 'dashboardMainModel4',
            sorters: 'category',
            grouper: {
                groupFn: function(record) {
                    return record.get('category');
                }
            },
            data: [
                { category:'수익지표',title:'매출액',field1:'3,408', field2:'4,731',field3:'달성률',field4:'120%'},
                { category:'수익지표',title:'EBITDA',field1:'1,041', field2:'1,081',field3:'달성률',field4:'104%'},
                { category:'수익지표',title:'당기순이익',field1:'416', field2:'460',field3:'달성률',field4:'111%'},
                { category:'비용지표',title:'영업원가',field1:'70.55', field2:'85.91',field3:'차이',field4:'15.36'},
                { category:'비용지표',title:'재료비원가',field1:'54.53', field2:'72.75',field3:'차이',field4:'18.23'},
                { category:'비용지표',title:'kW당 수선유지비',field1:'721', field2:'724',field3:'차이',field4:'2.90'},
                { category:'생산성지표',title:'1인당판매량',field1:'1,935', field2:'2,322',field3:'달성률',field4:'120%'},
                { category:'생산성지표',title:'1인당매출액',field1:'167', field2:'233',field3:'달성률',field4:'139%'},
                { category:'생산성지표',title:'1인당EBITDA',field1:'50.97', field2:'53.13',field3:'달성률',field4:'104%'}
            ]
        });
        var lvList = Ext.create('Ext.List', {
            fullscreen: true,
            itemTpl: '<div class="contact"><strong>{title}</strong></div>'+
                     '<table width="100%" style="border:1px solid;text-align:center;">' +
                     '<tr><td>계획 : {field1}</td><td>{field3}</td></tr>' +
                     '<tr><td>실적 : {field2}</td><td>{field4}</td></tr></table>',
            store: store,
            grouped: true
        });
        panel.add(lvList);
    },
    applyDashboardSub:function(){
        var panel = this.getDashboardSub();
        var color = ['red','green','blue'];
        var title = ['수익지표','비용지표','생산성지표'];

        var getChart = Ext.create('Ext.chart.Chart',{
            animate: true,
            store: {
                fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
                data: [
                    {'name':'metric one', 'data1':Math.ceil(100*Math.random()), 'data2':Math.ceil(100*Math.random()), 'data3':Math.ceil(100*Math.random()), 'data4':Math.ceil(100*Math.random()), 'data5':Math.ceil(100*Math.random())},
                    {'name':'metric two', 'data1':Math.ceil(100*Math.random()), 'data2':Math.ceil(100*Math.random()), 'data3':Math.ceil(100*Math.random()), 'data4':Math.ceil(100*Math.random()), 'data5':Math.ceil(100*Math.random())},
                    {'name':'metric three', 'data1':Math.ceil(100*Math.random()), 'data2':Math.ceil(100*Math.random()), 'data3':Math.ceil(100*Math.random()), 'data4':Math.ceil(100*Math.random()), 'data5':Math.ceil(100*Math.random())},
                    {'name':'metric four', 'data1':Math.ceil(100*Math.random()), 'data2':Math.ceil(100*Math.random()), 'data3':Math.ceil(100*Math.random()), 'data4':Math.ceil(100*Math.random()), 'data5':Math.ceil(100*Math.random())},
                    {'name':'metric five', 'data1':Math.ceil(100*Math.random()), 'data2':Math.ceil(100*Math.random()), 'data3':Math.ceil(100*Math.random()), 'data4':Math.ceil(100*Math.random()), 'data5':Math.ceil(100*Math.random())}
                ]
            },
            legend: {
                position: 'top'
            },
            axes: [{
                type: 'numeric',
                position: 'left',
                fields: ['data1'],
                title: {
                    text: 'Sample Values',
                    fontSize: 15
                },
                grid: true,
                minimum: 0
            }, {
                type: 'category',
                position: 'bottom',
                fields: ['name'],
                title: {
                    text: 'Sample Values',
                    fontSize: 15
                }
            }],
            series: [{
                type: 'area',
                title: ['Data1', 'Data2', 'Data3'],
                subStyle: {
                    fill: ['blue', 'green', 'red']
                },
                xField: 'name',
                yField: ['data1', 'data2', 'data3']

            }]
        });
        var subPanel = Ext.create('Ext.Panel',{
            flex:6,
            layout:'fit',
            items:getChart
        });
        panel.add(subPanel);

        Ext.define('dashboardSubModel4',{
            extend:'Ext.data.Model',
            config:{
                fields:['category','title','field1']
            }
        });
        var store = Ext.create('Ext.data.Store', {
            model: 'dashboardSubModel4',
            sorters: [{
                property:'field1',
                direction:'DESC'
            }],
            grouper: {
                groupFn: function(record) {
                    return '<table width="100%"><tr><td>'+record.get('category')+'</td><td align="right">[단위:억원]&nbsp;</td></tr></table>';
                }
            },
            data: [
                { category:'수익요소별 누계 매출액',title:'계획발전',field1:Math.ceil(100*Math.random())+100},
                { category:'수익요소별 누계 매출액',title:'제약발전',field1:Math.ceil(100*Math.random())+100},
                { category:'수익요소별 누계 매출액',title:'용량',field1:Math.ceil(100*Math.random())+100},
                { category:'수익요소별 누계 매출액',title:'기타',field1:Math.ceil(100*Math.random())+100},
                { category:'수익요소별 누계 매출액',title:'제약비발전',field1:Math.ceil(100*Math.random())+100},
                { category:'수익요소별 누계 매출액',title:'계획발전',field1:Math.ceil(100*Math.random())+100},
                { category:'수익요소별 누계 매출액',title:'제약발전',field1:Math.ceil(100*Math.random())+100},
                { category:'수익요소별 누계 매출액',title:'용량',field1:Math.ceil(100*Math.random())+100},
                { category:'수익요소별 누계 매출액',title:'기타',field1:Math.ceil(100*Math.random())+100},
                { category:'수익요소별 누계 매출액',title:'제약비발전',field1:Math.ceil(100*Math.random())+100}
            ]
        });
        var lvList = Ext.create('Ext.List', {
            margin:'0px 0px 0px 5px',
            fullscreen: true,
            itemTpl: ['<table width="100%"><tr><td width="20%">{title}</td>',
                     '<td style="text-align:left;">',
                     '<span style="display:inline-block;background-color:aqua;width:{field1}px;">&nbsp;</span></td>',
                     '<td width="10%" style="text-align:right">{field1}</td></tr></table>',
                    {
                        doAction:function(num){
                            return num;
                        }
                    }],
            store: store,
            grouped: true,
            listeners:{
                itemtap:function(me, index, target, record, e, eOpts){
                    var y = me.getItemHeight()*index;
                    this.getScrollable().getScroller().scrollTo(0,y,{
                        duration:1000
                    });
                }
            }
        });
        var subPanel = Ext.create('Ext.Panel',{
            flex:4,
            layout:'fit',
            items:lvList
        });
        panel.add(subPanel);
    }
});